<!-- 股东人数 -->
<template>
    <div class="partnerNum_container w1021">
        <!-- 柱状图开始 -->
        <div class="echarts_box w1021">
            <!-- <div class="title">
                    股东总数
                </div> -->
            <div class="partnerNum_echarts table w1021" id="myecharts"></div>
            <div class="info">注：点击下方表格可切换查看各指标的历史趋势</div>
        </div>

        <!-- 柱状图结束 -->
        <!-- 表格开始 -->
        <div class="table w1021 partnerNum">
            <div class="tableTr tableBody top flex">
                <span class="tableTd title_item">截止日期</span>
                <span
                    v-for="(item, index) in data"
                    :key="index"
                    class="orange tableTd list_item date"
                >{{ item.endDate }}</span
                >
            </div>
            <div
                class="tableTr tableBody top flex"
                :class="{ activeRow: activeRow == 'totHolder' }"
                @click="handleClickRow('totHolder', 'number')"
            >
                <span class="tableTd title_item"> 股东总数（万户） </span>
                <span
                    v-for="(item, index) in data"
                    :key="index"
                    class="orange tableTd list_item"
                >{{ item.totHolder | filterVal("number") }}</span
                >
            </div>
            <div
                class="tableTr tableBody top flex"
                :class="{ activeRow: activeRow == 'avgNum' }"
                @click="handleClickRow('avgNum', 'number')"
            >
                <span class="tableTd title_item"> 户均持股数量（万股） </span>
                <span
                    v-for="(item, index) in data"
                    :key="index"
                    class="orange tableTd list_item"
                >{{ item.avgNum | filterVal("number") }}</span
                >
            </div>
            <div
                class="tableTr tableBody top flex"
                :class="{ activeRow: activeRow == '_avgNumQtrGr' }"
                @click="handleClickRow('_avgNumQtrGr')"
            >
                <span class="tableTd title_item">
                    户均持股数季度增长率（％）
                </span>
                <span
                    v-for="(item, index) in data"
                    :key="index"
                    class="orange tableTd list_item"
                    :class="item._avgNumQtrGrClass"
                >{{ item._avgNumQtrGr | filterVal }}</span
                >
            </div>
            <div
                class="tableTr tableBody top flex"
                :class="{ activeRow: activeRow == '_avgPctQtrGr' }"
                @click="handleClickRow('_avgPctQtrGr')"
            >
                <span class="tableTd title_item">
                    户均持股比例季度增长率（％）
                </span>
                <span
                    v-for="(item, index) in data"
                    :key="index"
                    class="orange tableTd list_item"
                    :class="item._avgPctQtrGrClass"
                >{{ item._avgPctQtrGr | filterVal }}</span
                >
            </div>
            <div
                class="tableTr tableBody top flex"
                :class="{ activeRow: activeRow == '_avgNum6MthGr' }"
                @click="handleClickRow('_avgNum6MthGr')"
            >
                <span class="tableTd title_item">
                    户均持股数半年增长率（％）
                </span>
                <span
                    v-for="(item, index) in data"
                    :key="index"
                    class="orange tableTd list_item"
                    :class="item._avgNum6MthGrClass"
                >{{ item._avgNum6MthGr | filterVal }}</span
                >
            </div>
            <div
                class="tableTr tableBody top flex"
                :class="{ activeRow: activeRow == '_avgPct6MthGr' }"
                @click="handleClickRow('_avgPct6MthGr')"
            >
                <span class="tableTd title_item">
                    户均持股比例半年增长率（％）
                </span>
                <span
                    v-for="(item, index) in data"
                    :key="index"
                    class="orange tableTd list_item"
                    :class="item._avgPct6MthGrClass"
                >{{ item._avgPct6MthGr | filterVal }}</span
                >
            </div>
            <div
                class="tableTr tableBody top flex"
                :class="{ activeRow: activeRow == '_totShrPctA' }"
                @click="handleClickRow('_totShrPctA')"
            >
                <span class="tableTd title_item">
                    前十大股东持股比例合计（％）
                </span>
                <span
                    v-for="(item, index) in data"
                    :key="index"
                    class="orange tableTd list_item"
                    :class="item._totShrPctAClass"
                >{{ item._totShrPctA | filterVal }}</span
                >
            </div>
            <div
                class="tableTr tableBody top flex"
                :class="{ activeRow: activeRow == '_totShrPctB' }"
                @click="handleClickRow('_totShrPctB')"
            >
                <span class="tableTd title_item">
                    前十大流动股东持股比例合计（％）
                </span>
                <span
                    v-for="(item, index) in data"
                    :key="index"
                    class="orange tableTd list_item"
                    :class="item._totShrPctBClass"
                >{{ item._totShrPctB | filterVal }}</span>

            </div>

            <div class="tableNone orange w1021 top" v-if="data.length == 0">
                暂无数据
            </div>
        </div>
        <!-- 表格结束 -->
    </div>
</template>

<script>
import {number} from "../../script/api";

export default {
    data() {
        return {
            activeRow: "totHolder",
            initData: {
                totHolder: {
                    title: "股东总数（万户）",
                    min: 0,
                    Max: 10,
                    interval: null,
                },
                avgNum: {
                    title: "户均持股数量（万股）",
                    min: 0,
                    Max: 10,
                    interval: null,
                },
                _avgNumQtrGr: {
                    title: "户均持股数季度增长率（％）",
                    min: -25,
                    Max: 60,
                    interval: null,
                },
                _avgPctQtrGr: {
                    title: "户均持股比例季度增长率（％）",
                    min: -25,
                    Max: 60,
                    interval: null,
                },
                _avgNum6MthGr: {
                    title: "户均持股数半年增长率（％）",
                    min: -25,
                    Max: 60,
                    interval: null,
                },
                _avgPct6MthGr: {
                    title: "户均持股比例半年增长率（％）",
                    min: -25,
                    Max: 60,
                    interval: null,
                },
                _totShrPctB: {
                    title: "前十大流动股东持股比例合计（％）",
                    min: 0,
                    Max: 100,
                    interval: null,
                },
                _totShrPctA: {
                    title: "前十大股东持股比例合计（％）",
                    min: 0,
                    Max: 100,
                    interval: null,
                },
            },
            x_data: [],
            seriesList: [],
            myChart: null,
        };
    },
    props: ["data"],
    watch: {
        data(val) {
            val.map((item) => {
                this.x_data.push(item.endDate);
                let data = this.filter(item[this.activeRow], "number");
                this.seriesList.push(data);
            });
            this.$nextTick(() => {
                this.myEcharts();
            });
        },
    },

    filters: {
        filterVal(ops, num) {
            if (typeof ops == "number") {
                return number(ops, num);
            }
            return ops ? ops : "--";
        },
    },
    components: {},
    computed: {},
    mounted() {
        this.myChart = this.$echarts.init(document.getElementById("myecharts"));
    },
    methods: {
        filter(ops, num) {
            if (typeof ops == "number") {
                return number(ops, num);
            }
            return ops ? ops : "--";
        },

        myEcharts() {
            //配置图表
            var option = {
                title: {
                    text: "",
                },
                tooltip: {
                    // formatter: "{a} <br/>  {b}  {c}%",
                    backgroundColor: "rgba(0,0,0,1)", // 提示框背景颜色
                    textStyle: {
                        fontSize: "14px",
                        color: "#ffffff", // 设置文本颜色 默认#FFF
                        lineHeight: "16px",
                    },
                    formatter: (params) => {

                        var res = `
                            <div >
                             <div >
                               <span style="color:#ffff;font-size:14px">
                                    ${params.name}
                               </span>
                               </div>
                                <div  style="color: #448AFF;font-size:14px;margin-top:10px;">
                               <span >
                                    ${params.seriesName}
                               </span>
                               <span style="padding-left:20px;">
                                    ${params.value}
                               </span>
                               </div>
                            <div>
                         
                         
                         `;
                        return res;
                    },
                },
                legend: {
                    textStyle: {
                        color: "#E6E6E6",
                        fontSize: 16,
                    },
                },
                xAxis: {
                    data: this.x_data,
                    axisLabel: {
                        show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
                        interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
                        textStyle: {
                            color: "#999999",
                            fontSize: 14,
                        },
                    },

                    axisLine: {
                        show: true, // Y轴线设置
                        lineStyle: {
                            color: "#000",
                            width: 1,
                        },
                    },
                },
                yAxis: {
                    axisLine: {
                        show: true, // Y轴线设置
                        lineStyle: {
                            color: "#000",
                            width: 1,
                        },
                    },
                    axisLabel: {
                        //字体颜色
                        show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
                        interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
                        textStyle: {
                            //textStyle里面写x轴下的字体的样式
                            color: "#999999",
                            fontSize: 14,
                        },
                    },
                    splitLine: {
                        //x轴虚线颜色
                        show: true,
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: "#000",
                            width: 1,
                        },
                    },
                },

                series: [
                    {
                        data: this.seriesList,
                        type: "bar",
                        name: this.initData[this.activeRow]["title"],

                        textStyle: {
                            //textStyle里面写x轴下的字体的样式
                            color: "#ffffff",
                            fontSize: 14,
                        },
                    },
                ],
            };

            this.myChart.setOption(option);
        },

        handleClickRow(activeName, type) {
            console.log("activeName", activeName);
            console.log("type", type);
            this.activeRow = activeName;
            this.seriesList = [];
            this.data.map((item) => {
                let data = null;
                if (type) {
                    data = this.filter(item[activeName], "number");
                } else {
                    data = this.filter(item[activeName]);
                }
                this.seriesList.push(data);
            });
            console.log("this.seriesList", this.seriesList,this.initData);
            this.myEcharts();
        },
    },
};
</script>
<style lang="scss" scoped>
.partnerNum {
    .title_item {
        padding-left: 6px;
        width: 237px;
        height: 34px;
        line-height: 34px !important;
        min-height: 34px !important;
        background: #212126;
        justify-content: left !important;

        flex-direction: row;

        box-sizing: border-box;
    }
}

.activeRow {
    .tableTd {
        background: #2d3245 !important;
    }
}

.list_item {
    flex: 1;
}

.date {
    font-weight: 400;
    color: #e6e6e6;
}

.tableTd {
    line-height: 34px !important;
    min-height: 34px !important;
}

.echarts_box {
    padding-top: 20px;
    background: #1a1a1f;

}

.partnerNum_echarts {
    height: 257px;
}

.info {
    text-align: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    padding-bottom: 20px;
    margin-top: -20px;
}
</style>